<template>
    <div class="content">
        <el-row :span="24" :gutter="10">
            <!-- 个人信息 -->
            <el-col :span="24">
                <el-card shadow="hover">
                    <User @toBiliBili="toBiliBili"></User>
                </el-card>
            </el-col>
            <!-- 牛马小分队 -->
            <el-col :span="12" :lg="12" :md="24" :sm="24" :xs="24" style="margin-top: 6px;">
                <el-card shadow="hover">
                    <TimeLine :weekDay="weekDay"></TimeLine>
                </el-card>
            </el-col>
            <!-- 天气 -->
            <el-col :span="4" :lg="4" :md="8" :sm="8" :xs="8" style="margin-top: 6px;">
                <el-card shadow="hover">
                    <Weather :cityWeather="cityWeather" @toGaode="toGaode"></Weather>
                </el-card>
            </el-col>
            <!-- 时间 -->
            <el-col :span="5" :lg="5" :md="10" :sm="10" :xs="10" style="margin-top: 6px;">
                <el-card shadow="hover">
                    <Nowtime :formattedDate="formattedDate" :formattedTime="formattedTime" :weekDay="weekDay"></Nowtime>
                </el-card>
            </el-col>
            <!-- 工作状态 -->
            <el-col :span="3" :lg="3" :md="6" :sm="6" :xs="6" style="margin-top: 6px;">
                <el-card shadow="hover">
                    <Wookstatus :weekDay="weekDay"></Wookstatus>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import User from "./components/user.vue"
import Weather from "./components/weather.vue";
import Nowtime from "./components/nowtime.vue";
import Wookstatus from "./components/wookstatus.vue";
import TimeLine from "./components/timeLine.vue"
import { useFormattedTime } from "@/hooks/formattedTime";
import { useCityWeather } from "@/hooks/cityWeather/cityWeather";

// 打开bilibili个人主页
const toBiliBili = () => {
    window.open('https://space.bilibili.com/8197573', '_blank');
}

// 获取当前时间
const { formattedDate, formattedTime, weekDay, updateTime } = useFormattedTime({
    format: '12', // 可以切换为 '24' 表示 24 小时制
    dateSeparator: '-'
});
// 每秒更新的定时器
let intervalId: number;

// 查询天气
const { cityWeather } = useCityWeather()
// 打开高德
const toGaode = () => {
    window.open('https://lbs.amap.com/api/javascript-api-v2/guide/services/weather', '_blank');
}

onMounted(() => {
    // 每秒更新时间
    intervalId = window.setInterval(() => {
        updateTime(Date.now()); // 每秒更新一次时间
    }, 1000);
})

// 在组件销毁前清除定时器
onBeforeUnmount(() => {
    clearInterval(intervalId);
});
</script>

<style lang="scss" scoped>
.content {
    width:100%;
}

:deep(.el-card__body) {
    padding: 0 !important;
}
</style>